<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书</title>
<link rel="stylesheet" type="text/css" href="css/category.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="js/category5.js"></script>

</head>
<body>
	<div id="big" class="container-fluid">
		<div class="container">
			<!-- 头条 -->
			<div class="row" id="title">
				<!-- logo -->
				<div class="col-sm-5" id="title_img">
					<img src="images/logo.png" style="height: 90px; width: 300px;">
				</div>
				<!-- 头像 -->
				<div class="col-sm-2" style="text-align: center;"></div>
				<!-- 安全退出 -->
				<div class="col-sm-5" id="title_order">
					<ul id="title_ul1">
						<span><a href="personalCenter.html">个人首页</a></span>
						<span>|</span>
						<span><a href="cart.html">注销帐号</a></span>
						<span>|</span>

					</ul>
					<ul id="title_ul2">
						<span>您好,<span id="account1"></span>,欢迎您来拍卖!
						</span>
						<span>[</span>
						<span><a style="color: orange" href="exit">安全退出</a></span>
						<span>]</span>
					</ul>
				</div>
			</div>
			<!-- 分割线 -->
			<div class="row">
				<div class="col-sm-12" id="title_img" style="height: 40px;">
					<img src="images/line.png" style="width: 100%; height: 40px;">
				</div>
			</div>
			<div class="row" style="background: white; height: 30px;"></div>
			<div class="row" >
				<div class="col-sm-3" style="border: 1px solid #E0E0E0">
					<b><span style="color:red">最热拍卖品</span></b>
					<div v-for="h in heats" style="width:100%;height:215px;">
						<div @click="toDetail(h.p_id)" style="width: 100%; height: 195px;border:1px solid #ccc; ">
							<div style="width:100%;height:100px;">
								<img style="width:260px;height:100px;" v-bind:src="h.picture">
							</div>
							<div style="width:260px;height:95px;">
								<div>
									{{h.name}}
								</div>
								<div style="float:right;">
									<b>起拍价:<span style="color:red">{{h.starting_price}}元</span></b>
								</div>
								<div>
									起拍:<b>{{ h.auction_time}}</b>
								</div>
								<div>
									出价次数:{{h.chargeNum}}次
								</div>
								<div style="color:red;float:right;">
									<span><b>{{h.details}}</b></span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-9"
					style="height: 600px; background: white; border: 1px solid #E0E0E0;">
					<div id="pages" class="row"
						style="height: 30px; background: white; padding-left: 10px; padding-top: 2px;">
						<div style="color:blue;" class="box">
							<a @click="newest()">最新发布</a> <i class="down"></i>
						</div>
						<div style="width: 20px;"></div>
						<div style="color:blue;width: 65px; height: 25px; border: 1px solid #ccc;">
							<a @click="hotest()">热&nbsp;&nbsp;度</a> <i class="down"></i>
						</div>
						<div style="width: 20px;"></div>
						<div style="color:blue;" class="box">
							<a @click="chargeNum()">出价次数</a> <i class="down"></i>
						</div>
						<div style="width: 20px;"></div>
						<div style="color:blue;width: 65px; height: 25px; border: 1px solid #ccc;">
							<a @click="priceUpAndDown()">价&nbsp;&nbsp;格</a>
							<div style="width: 10px; height: 10px; float: right;">
								<i id="price-up"></i>
							</div>
							<div style="width: 10px; height: 10px; float: right;">
								<span id="price-down"></span>
							</div>
						</div>
						<div style="width: 300px;">
							<div style="margin-left: 150px;">
								共<span style="color: red;"><b id="total">0</b></span>件拍卖品
							</div>
						</div>
						<div style="width: 50px;">
							<span style="color: red"><b id="currentPage">0</b></span>/<span id="totalPages">0</span>
						</div>
						<div>
							<button id="lastBt" @click="lastPage()"
								style="height: 30px; background:lightgray; width: 50px; padding-top: 3px; border: 1px solid #bbb">
								<i class="left"></i>
							</button>
							<button id="nextBt" @click="nextPage()"
								style="height: 30px; background:snow; width: 50px; padding-top: 3px; border: 1px solid #bbb">
								<i class="right"></i>
							</button>
						</div>

					</div>
					<div class="row" style="height: 50px; background: #ddd;">
						<div id='app'>
							<template v-if='list.category.length'>
							<div class='nav' v-for='(items,index) in list.category'>
								<div class='mutil-query-title' v-if='items.name' :key="items.id">
									<span
									style='margin-left: 20px'	@click='remove(index)'>清空</span>
								</div>
								<div style="width: 20px;"></div>
								<div v-for='(item,key) in items.items'>
									<span :class="{'active':item.active}" 
										@click='handle(index,key);tofindProduct(item.name,key+1)' :key='item.id'>{{item.name}}</span>
									<div style="width: 100px"></div>

								</div>
							</div>
							</template>
							<template v-if='list.condition.length'>
							<div style="position: absolute; left: 400px; top: 55px;">
								<span style="color:red;">已选中:<span> <span id="selected"
										v-for='(item,index) in list.condition' class='active'>{{item.name}}&nbsp;|&nbsp;</span>
							</div>
							</template>
						</div>
					</div>
					<div class="row" style="height: 10px;"></div>
					<div id="goods" class="row"
						style="width: 900px; height: 600px; float: left;">
						<div v-for='product in products' style="width:270px;height:200px;padding-bottom:0;margin-bottom:0;">
							<div @click="toDetail(product.p_id)" style="width: 260px; height: 190px;border:1px solid #ccc;float:left; ">
								<div style="width:100%;height:100px;">
									<img style="width:100%;height:100px;" v-bind:src="product.picture">
								</div>
								<div style="width:100%;height:95px;">
									<div>
										{{product.name}}
									</div>
									<div style="float:right;">
										<b>起拍价:<span style="color:red">{{product.starting_price}}元</span></b>
									</div>
									<div>
										起拍:<b>{{ product.auction_time}}</b>
									</div>
									<div>
										出价次数:{{product.chargeNum}}次
									</div>
									<div style="color:red;float:right;">
										<span><b>{{product.details}}</b></span>
									</div>
								</div>
							</div>

						</div>

					</div>

				</div>
			</div>

		</div>
	</div>

	<script>
	var count = 0;
	var flag=true;
	window.sessionStorage.setItem("moreStatus",0);
	var goods=new Vue({
		el:"#big",
		data:{
			products:[],
			list,
			heats:[]
		},
		mounted(){
			if(window.sessionStorage.getItem("status")==2){
				var ct_id=window.sessionStorage.getItem("ct_id")-0;
				axios.get("product/findByCt_id?co_id=5&ct_id="+ct_id+"&pageNum=1").then(res=>{
					window.sessionStorage.setItem("toUrl","product/findByCt_id?co_id=5&ct_id="+ct_id);
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
				});
			}
			else if(window.sessionStorage.getItem("status")==1){
				axios.get("product/findByCategory?co_id=5&pageNum=1").then(res => {
					window.sessionStorage.setItem("toUrl","product/findByCategory?co_id=5");
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
						
				});
			}
			axios.get("product/findHeat2").then(res=>{
				console.info(res)
				this.heats=res.data;
			})
		},
		methods:{
			nextPage:function(){
				var num=document.getElementById("currentPage").innerHTML-0;
				//var max=new Number(document.getElementById("totalPages").innerHTML);
				var max=document.getElementById("totalPages").innerHTML-0;
				num++;
				axios.get(window.sessionStorage.getItem("toUrl")+"&pageNum="+num)
					.then(res=>{
						console.info(res)
						this.products=res.data.data
						document.getElementById("currentPage").innerHTML=res.data.currentPage;
						document.getElementById("lastBt").removeAttribute("disabled");
						document.getElementById("lastBt").style.background="snow";
					});
				if(num==max){
					document.getElementById("nextBt").setAttribute("disabled","true");
					document.getElementById("nextBt").style.background="lightgray";					
				}
					
				
			},
			lastPage:function(){
				var num=document.getElementById("currentPage").innerHTML-0;
				num--;
				axios.get(window.sessionStorage.getItem("toUrl")+"&pageNum="+num)
					.then(res => {
						console.info(res)
						this.products=res.data.data;
						document.getElementById("currentPage").innerHTML=res.data.currentPage;
						document.getElementById("nextBt").removeAttribute("disabled");
						document.getElementById("nextBt").style.background="snow";
					});
				if(num==1){
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";					
				}
			},			
			handle : function(index, key) {
				var item = this.list.category[index].items;
				item.filter(function(v, i) {
					if (i == key) {
						v.active = true;
						this.list.condition.filter(function(v2, i) {
							if (v.name == v2.name) {
								this.list.condition.splice(i, 1);
								count--;
							}
						});
						Vue.set(this.list.condition, count++, v);
					}
				});

			},
			remove : function(index) {
				var item = this.list.category[index].items;
				item.filter(function(v1, key) {
					v1.active = false;
					this.list.condition.filter(function(v2, i) {
						if (v1.name == v2.name) {
							this.list.condition.splice(i, 1);
							count--;
						}
					});
				});
				
				if(index==0){
					//展示所有酒水，象棋     statusId     categoryName
					var name=window.sessionStorage.getItem("categoryName");
					axios.get("product/findByName?name="+name+"&pageNum=1").then(res=>{
						window.sessionStorage.setItem("toUrl","product/findByName?name="+name);						
						console.info(res);
						this.products=res.data.data;
						document.getElementById("total").innerHTML=res.data.total;
						document.getElementById("currentPage").innerHTML=res.data.currentPage;
						document.getElementById("totalPages").innerHTML=res.data.totalPages;
						document.getElementById("lastBt").setAttribute("disabled","true");
						document.getElementById("lastBt").style.background="lightgray";
						if(res.data.totalPages==1){
							document.getElementById("nextBt").setAttribute("disabled","true");
							document.getElementById("nextBt").style.background="lightgray";
						}
					})
				}else if(index==1){
					//展示所有状态的商品
					var status=window.sessionStorage.getItem("statusId")
					axios.get("prodcut/findByStatus?audit_status="+status+"&pageNum=1").then(res=>{
						window.sessionStorage.setItem("toUrl","product/findByStatus?audit_status="+status);						
						console.info(res);
						this.products=res.data.data;
						document.getElementById("total").innerHTML=res.data.total;
						document.getElementById("currentPage").innerHTML=res.data.currentPage;
						document.getElementById("totalPages").innerHTML=res.data.totalPages;
						document.getElementById("lastBt").setAttribute("disabled","true");
						document.getElementById("lastBt").style.background="lightgray";
						if(res.data.totalPages==1){
							document.getElementById("nextBt").setAttribute("disabled","true");
							document.getElementById("nextBt").style.background="lightgray";
						}
					})
				}
			
			},
			tofindProduct:function(name,id){
				if(name=="即将拍卖" | name=="正在竞拍" | name=="已结束"){
					if(window.sessionStorage.getItem("moreStatus")==0){
						axios.get("product/findByStatus?audit_status="+id+"&pageNum=1").then(res=>{
							window.sessionStorage.setItem("toUrl","product/findByStatus?audit_status="+id);
							console.info(res);
							this.products=res.data.data;
							document.getElementById("total").innerHTML=res.data.total;
							document.getElementById("currentPage").innerHTML=res.data.currentPage;
							document.getElementById("totalPages").innerHTML=res.data.totalPages;
							document.getElementById("lastBt").setAttribute("disabled","true");
							document.getElementById("lastBt").style.background="lightgray";
							if(res.data.totalPages==1){
								document.getElementById("nextBt").setAttribute("disabled","true");
								document.getElementById("nextBt").style.background="lightgray";
							}
						});
						window.sessionStorage.setItem("moreStatus",1);
					}else{
						var newName=window.sessionStorage.getItem("categoryName");
						axios.get("product/findByStatusAndName?audit_status="+id+"&name="+newName+"&pageNum=1").then(res=>{
							window.sessionStorage.setItem("toUrl","product/findByStatusAndName?audit_status="+id+"&name="+newName);
							console.info(res);
							this.products=res.data.data;
							document.getElementById("total").innerHTML=res.data.total;
							document.getElementById("currentPage").innerHTML=res.data.currentPage;
							document.getElementById("totalPages").innerHTML=res.data.totalPages;
							document.getElementById("lastBt").setAttribute("disabled","true");
							document.getElementById("lastBt").style.background="lightgray";
							if(res.data.totalPages==1){
								document.getElementById("nextBt").setAttribute("disabled","true");
								document.getElementById("nextBt").style.background="lightgray";
							}
						})
					}
					window.sessionStorage.setItem("statusId",id);
				}else if(name=="酒水" | name=="象棋"){
					if(window.sessionStorage.getItem("moreStatus")==0){
						axios.get("product/findByName?name="+name+"&pageNum=1").then(res=>{
							window.sessionStorage.setItem("toUrl","product/findByName?name="+name);
							console.info(res);
							this.products=res.data.data;
							document.getElementById("total").innerHTML=res.data.total;
							document.getElementById("currentPage").innerHTML=res.data.currentPage;
							document.getElementById("totalPages").innerHTML=res.data.totalPages;
							document.getElementById("lastBt").setAttribute("disabled","true");
							document.getElementById("lastBt").style.background="lightgray";
							if(res.data.totalPages==1){
								document.getElementById("nextBt").setAttribute("disabled","true");
								document.getElementById("nextBt").style.background="lightgray";
							}
						});
						window.sessionStorage.setItem("moreStatus",1);
					}else{
						var newId=window.sessionStorage.getItem("statusId",id);
						axios.get("product/findByStatusAndName?name="+name+"&audit_status="+newId+"&pageNum=1").then(res=>{
							window.sessionStorage.setItem("toUrl","product/findByStatusAndName?name="+name+"&audit_status="+newId);
							console.info(res)
							this.products=res.data.data;
							document.getElementById("total").innerHTML=res.data.total;
							document.getElementById("currentPage").innerHTML=res.data.currentPage;
							document.getElementById("totalPages").innerHTML=res.data.totalPages;
							document.getElementById("lastBt").setAttribute("disabled","true");
							document.getElementById("lastBt").style.background="lightgray";
							if(res.data.totalPages==1){
								document.getElementById("nextBt").setAttribute("disabled","true");
								document.getElementById("nextBt").style.background="lightgray";
							}
						})
					}
					window.sessionStorage.setItem("categoryName",name);
				}
				

			},
			newest:function(){
				axios.get("product/findByNewest?co_id=5&pageNum=1").then(res=>{
					window.sessionStorage.setItem("toUrl","product/findByNewest?co_id=5");
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
				})
			},
			hotest:function(){
				axios.get("product/findByHotest?co_id=5&pageNum=1").then(res=>{
					window.sessionStorage.setItem("toUrl","product/findByHotest?co_id=5");
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
				})
			},
			chargeNum:function(){
				axios.get("product/findByChargeNum?co_id=5&pageNum=1").then(res=>{
					window.sessionStorage.setItem("toUrl","product/findByChargeNum?co_id=5");
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
				})
			},
			priceUpAndDown(){
				axios.get("product/findByPriceUpAndDown?co_id=5&flag="+flag+"&pageNum=1").then(res=>{
					window.sessionStorage.setItem("toUrl","product/findByPriceUpAndDown?co_id=5&flag="+flag);
					flag=!flag;
					console.info(res);
					this.products=res.data.data;
					document.getElementById("total").innerHTML=res.data.total;
					document.getElementById("currentPage").innerHTML=res.data.currentPage;
					document.getElementById("totalPages").innerHTML=res.data.totalPages;
					document.getElementById("lastBt").setAttribute("disabled","true");
					document.getElementById("lastBt").style.background="lightgray";
					if(res.data.totalPages==1){
						document.getElementById("nextBt").setAttribute("disabled","true");
						document.getElementById("nextBt").style.background="lightgray";
					}
				})
			},
			toDetail:function(p_id){
				axios.get("product/updateHeat?p_id="+p_id);
				window.location.href="datail.html?p_id="+p_id;
			},
			judgeRole:function(){
				axios.get("user/judgeRole").then(res=>{
					
				})
				
			}
		}
		
	});
	
</script>

</body>
</html>